<template>
    <view class="card flex" @click="toDetail">
        <image
            class="poster"
            src="https://img2.baidu.com/it/u=1552562083,1471542008&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750"
        />
        <view class="info">
            <view class="name bold ellipsis">这里这里这里这里这里这里这里这里这里这里这里这里这里这里这里这里这里这里这里这里这里这里这里这里这里这里这里这里这里这里这里这里这里这里这里这里这里这里这里这里这里这里这里这里这里这里这里这里这里这里这里这里</view>
            <view>
                <text class="inc">累计收益：</text>
                <text class="money orange">￥11123022</text>
            </view>
            <view class="income flex">
                <view class="item flex flex-c">
                    <text class="type">推广计划(10%)</text>
                    <text class="orange">￥123</text>
                </view>
                <view class="item flex flex-c">
                    <text class="type">推广计划(10%)</text>
                    <text class="orange">￥123</text>
                </view>
            </view>
            <view class="date flex flex-bt flex-a">
                <view class="id-box flex flex-c flex-bt">
                    <view class="id gray">任务ID：1212121</view>
                    <view class="gray">创建时间：2024-03-02 18:36:36</view>
                </view>
                <view class="flex flex-c flex-a-c btn">
                    <image
                        src="../../../assets/images/icons/send.png"
                        mode="scaleToFill"
                        style="width:32rpx;height: 32rpx;margin-top:8rpx"
                    />
                    <text class="fs-24">去投稿</text>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
export default{
    data(){
        return {
            
        }
    },
    methods: {
        toDetail(){
            console.log('----')
            uni.navigateTo({
                url: '/pages/extend/detail/index'
            })   
        }
    },
}
</script>
<style lang="less" scoped>
    @import url('../../../assets/styles/common');
    .card{
        padding: 20rpx;
        box-sizing: border-box;
        background: #ffffff;
        border-radius: 8rpx;
        margin-bottom: 24rpx;
        .poster{
            width: 204rpx;
            height: 272rpx;
            border-radius: 8rpx;
            flex-shrink: 0;
        }
        .info{
            width: calc(100% - 204rpx);
            padding-left: 16rpx;
            flex: 1;
            .name{
                display: block;
                flex:1;
                font-size:32rpx;
                line-height: 32rpx;
                margin-bottom: 8rpx;
            }
            .gray{
                color: rgba(7,11,28,0.4);
                font-size:22rpx;
            }
            .orange{
                color: #F65900;
                font-weight: bold;
            }
            .inc{
                font-size: 24rpx;
                font-weight: bold;
                color: rgba(7,11,28,0.6);
            }
            .money{
                font-size: 28rpx;
            }
            .income{
                padding-right: 32rpx;
                margin-top:8rpx;
                .item{
                    background: #F5F5FF;
                    border-radius: 8rpx;
                    padding: 8rpx 20rpx;
                    flex:1;
                    .orange{
                        font-size:24rpx;
                    }
                    &:nth-child(1){
                        margin-right: 8rpx;
                    }
                    .type{
                        font-size:24rpx;
                        color: rgba(7,11,28,0.6);
                    }
                }
            }
            .date{
                .id-box{
                    height: 44rpx;
                }
                padding-right: 24rpx;
                .id{
                    // margin-bottom: 4rpx;
                }
            }
            .btn{
                color:#436AF3;
            }
        }
    }
</style>